/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
} from 'react-native';

import { Button} from 'antd-mobile'
// import { Table, Icon } from 'antd';

// import Button from 'antd-mobile/lib/button';
const dataSource = [{
  key: '1',
  name: '胡彦斌',
  age: 32,
  address: '西湖区湖底公园1号'
}, {
  key: '2',
  name: '胡彦祖',
  age: 42,
  address: '西湖区湖底公园1号'
}];

const columns = [{
  title: '姓名',
  dataIndex: 'name',
  key: 'name',
}, {
  title: '年龄',
  dataIndex: 'age',
  key: 'age',
}, {
  title: '住址',
  dataIndex: 'address',
  key: 'address',
}];

export default class AntElementPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={{flexDirection: 'column',justifyContent: 'space-between',width: 375,height: 814}}>
            <Button type='primary' >primary</Button>
            <Button type='ghost'>ghost</Button>
            <Button type="primary" icon="search">搜索</Button>
            <Button type='primary' icon='search' style={{borderRadius: 0}}>icon</Button>
            <Button type='primary' icon='search' shape='circle-outline'>shape circle-outline</Button>
            <Button type='primary' icon='search' shape='circle' size='small'>size small</Button>
            <Button type='primary' icon='search' shape='circle' size='large'>size large</Button>
            <Button type='primary' icon='search' shape='circle' size='large' loading={true}>size large</Button>
            {/* <Table dataSource={dataSource} columns={columns}/>
            <Icon type="link" />
            <Icon type="arlsrow-salt" /> */}
            <Button type='primary' icon='search' shape='circle'>shape circle</Button>

          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
